<!--
 * @Descripttion: 
 * @version: 
 * @Author: Xyl
 * @Date: 2023-04-27 14:57:35
 * @LastEditors: zoey
 * @LastEditTime: 2023-05-17 17:24:14
-->
<template>
  <a-layout id="components-layout-demo-fixed-sider" class="home">
    <!-- 侧边栏 -->
    <!-- 全局右侧 -->
    <a-layout :style="{background:'#021132' }">
      <!-- 右侧上边 -->
      <a-layout-header :style="{ background: '#fff', padding: 0 }">
        <a-menu theme="light" mode="horizontal" v-model="current"
          :style="{ lineHeight: '64px',background:'#001529',color:'#fff'}">          
          <a-menu-item :key="'/Content'" @click="navi('/Content')" id="network-forensics">网络行为取证</a-menu-item>
        </a-menu>
      </a-layout-header>
      <!-- 内容部分 -->
      <a-layout-content :style="{ margin: '24px 16px 0', overflow: 'initial'}" class="contentflex">
        <div :style="{
            padding: '24px',
            // backgroundImage:'../../assets/image/base_bg.jpg',
            textAlign: 'left',
            minHeight: '1000px',
          }" v-cloak>
          <transition name="zoom-fade" mode="out-in">
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
          </transition>
        </div>
      </a-layout-content>
    </a-layout>
    <div class="clearfloat"></div>
  </a-layout>
</template>
<script>
  // 组件复用
  export default {
    data() {
      return {
        collapsed: false,
        ispage: true,
        user: '用户',
        isAmplification: false,
        fontAmp: {
          fontSize: '15px',
        },
        current: ['optionPlatform'],
      };
    },
    mounted() {
      window.document.title = '可信取证平台'
      if (window.sessionStorage.getItem("USER_LOGINNAME")) {
        this.$store.commit('changePermissionsUp', JSON.parse(window.sessionStorage.getItem("USER_LOGINNAME")));
      }
    },
    methods: {
      navi(s) {
        this.$router.push(s);
      },
      logout() {
        window.sessionStorage.clear();
        this.$store.commit('changePermissionsDown');
        this.$router.push('/');
      },
      changeAmp() {
        this.isAmplification = true;
      },
      changeNar() {
        this.isAmplification = false;
      },
    },
  };
</script>
<style scoped>
  #components-layout-demo-fixed-sider .logo {
    height: 32px;
    background: #ffffff33;
    margin: 16px;
  }

  #network-forensics {
    display: flex; 
    justify-content: center; 
    font-family: '微软雅黑', sans-serif; /* 设置字体 */
    color: #6aaee8; /* 文本颜色设置为透明，以便显示背景渐变 */
    font-size: 26px; /* 可选：设置字体大小 */
    font-weight: 530;
    padding: 0 10px; /* 可选：增加一些内边距 */
  }

  /* // .logo {
//   background-image: url("../assets/image/icon1.png");
// } */
  .logo {
    display: flex;
    height: 100px;
    /* padding-left: 24px; */
    overflow: hidden;
    line-height: 100px;
    /* white-space: nowrap;
  margin-left: center; */
  }

  .home {
    min-width: 1280px;
  }

  .login {
    float: right;
  }

  .clearfloat {
    clear: both;
    height: 0;
  }

  [v-cloak] {
    display: none;
  }

  /* content */
  .contentflex {

    /* background-image: url('../assets/image/base_bg.jpg'); */
  }

  /* slide-  页面切换动画 */
  .zoom-fade-enter-active,
  .zoom-fade-leave-active {
    left: 0px;
    transition: transform 0.35s, opacity 0.28s ease-in-out;
  }

  .zoom-fade-enter-from {
    opacity: 0;
    transform: scale(0.97);
  }

  .zoom-fade-leave-to {
    opacity: 0;
    transform: scale(1.03);
  }
</style>